<template>
  <div ref="chartMap" style="width: 100%; height: 600px;"></div>
</template>

<script setup lang="js">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import "echarts/map/js/world.js"; // 加载世界地图

const chartMap = ref(); // 图表容器
//坐标
const countryCoordinates = {
  China: [116.40, 39.90],
  UK: [0.13,52.00],
  USA: [-100.00, 40.00],
  Germany: [10.00, 51.00],
  France: [2.35, 46.60],
  Korea: [126.58,37.33],
  Japan: [138.25, 36.20],
  India: [78.96, 20.59],
  Brazil: [-51.93, -14.23],
  Australia: [134.49, -25.73],
  Canada: [-106.35, 56.13],
  Netherlands: [4.89, 52.37],
  Belgium: [4.35, 50.85],
  Italy: [12.48, 41.90],
  Sweden: [18.07, 59.33],
  Spain: [-3.70, 40.42],
  Austria: [16.37, 48.21],
  Norway: [10.75, 59.91],
  Portugal: [-9.14, 38.72],
  Switzerland: [7.44, 46.95],
  Denmark: [12.57, 55.68],
  Poland: [21.01, 52.23],
  Finland: [24.94, 60.17],
  Turkiye: [32.85, 39.93],
  Greece: [23.73, 37.98],
  Chile: [-70.65, -33.44],
  NewZealand: [174.78, -41.29],
  SouthAfrica: [28.22, -25.75],
  Brazil: [-47.93, -15.78],
  Indonesia: [106.84, -6.21],
  Israel: [34.78, 32.08],
  Mexico: [-99.13, 19.43],
  Iceland: [-21.82, 64.14],
  Thailand: [100.50, 13.75]
};

const countryData = {
  China: 2700000,
  UK: 53000,
  USA: 183000,
  Germany: 108000,
  France: 118000,
  Korea: 201000,
  Japan: 31600,
  India: 10900,
  Brazil: 3805,
  Australia: 2760,
  Canada: 26800,
  Netherlands: 145800,
  Belgium: 44000,
  Italy: 48100,
  Sweden: 34500,
  Spain: 25600,
  Austria: 17500,
  Norway: 27000,
  Portugal: 9400,
  Switzerland: 15800,
  Denmark: 17000,
  Poland: 5900,
  Finland: 12100,
  Turkiye:  7800,
  Greece: 5130,
  Chile: 1070,
  NewZealand: 1140,
  SouthAfrica: 300,
  Brazil: 3805,
  Indonesia: 710,
  Israel: 4910,
  Mexico: 2076,
  Iceland: 1560,
  Thailand: 2270
};

// 初始化图表
function initChart() {
  const myChart = echarts.init(chartMap.value);

  // 数据映射到点坐标
  const maxValue = Math.max(...Object.values(countryData));
  const mappedData = Object.keys(countryCoordinates).map((key) => ({
    name: key,
    value: [...countryCoordinates[key], countryData[key]]
  }));

  const option = {
    tooltip: {
      trigger: "item",
      formatter: (params) => {
        return `${params.name}: ${params.value[2] || 0}`;
      }
    },
    geo: {
      map: "world",
      roam: true,
      label: {
        show: false, 
        color: "#fff"
      },
      itemStyle: {
        areaColor: "#7dace4", 
        borderColor: "#fff",
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          areaColor: "#a6acec"
        },
        label: {
          show: true,//悬停显示
          color: "#fff"
        }
      }
    },
    visualMap: {
      type: "piecewise",
      left: "left",
      bottom: "10%",
      pieces: [
        { min: 2000000, label: "≥ 2,000,000", color: "#8A2BE2" },
        { min: 100000, max: 1999999, label: "100,000 - 1,999,999", color: "#00CED1" },
        { min: 50000, max: 99999, label: "50,000 - 99,999", color: "#a1d9ff" },
        { min: 10000, max: 49999, label: "10,000 - 49,999", color: "#32CD32" },
        { max: 9999, label: "< 10,000", color: "#ADFF2F" }
      ],
      textStyle: {
        color: "#fff"
      }
    },
    series: [
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        data: mappedData,
        symbolSize: (val) => Math.max(10, (val[2] / maxValue) * 20),
        rippleEffect: {
          scale: 5,
          period: 4,
          brushType: "fill"
        },
        itemStyle: {
          color: "#FF4500"
        }
      }
    ]
  };

  myChart.setOption(option);
}

onMounted(() => {
  initChart(); // 初始化图表
});
</script>

<style lang="css" scoped>
body {
  background-color: #000;
  color: #fff;
}

.chart-container {
  margin: 0 auto;
}
</style>
